<template>
    <u-popup v-model="isShow" mode="bottom">
		<view class="flex-between">
            <view class="btn" @click="isShow = false">取消</view>
            <view class="btn" @click="confirm">确定</view>
        </view>
        <picker-view @change="areaChange" class="picker-view">
            <picker-view-column>
                <view class="item" v-for="(item,index) in area.list" :key="index">{{item.name}}</view>
            </picker-view-column>
            <picker-view-column>
                <view class="item" v-for="(item,index) in area.list[area.column].children" :key="index">{{item.name}}</view>
            </picker-view-column>
        </picker-view>
	</u-popup>
</template>
<script setup lang="ts">
import {onShow} from '@dcloudio/uni-app';
const emit = defineEmits(['confirm']);
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
let isShow = ref(false);
let area = reactive({
    column: 0,
    list: [],
    cityIndex: 0,
});
const init = () => {
    isShow.value = true;
}
const getCity = () => {
    proxy.$http('get', '/admin/sysArea/guildArea', {}, (data,msg) => {
        area.list = data;
        // area.list = [
        //     {code: 1, name: '广东省', children: [{code:2, name: '湛江'}, {code:3, name: '广州'}]},
        //     {code: 1, name: '湖南', children: [{code:2, name: '长沙'}, {code:3, name: '凤凰'}]}
        // ];
    });
}
const areaChange = (val) => {
    console.log(area);
    area.column = val.detail.value[0];
    area.cityIndex = val.detail.value[1];
};
const confirm = () => {
    console.log(area.list[area.column].children[area.cityIndex]);
    emit('confirm', area.list[area.column].children[area.cityIndex]);
    isShow.value = false;
}
onShow(() => {
    getCity();
});
defineExpose({
  init,
});
</script>
<style scoped>
.picker-view {
	width: 750rpx;
	height: 600rpx;
	margin-top: 20rpx;
}
.item {
	line-height: 68rpx;
	text-align: center;
}
.btn{
    padding:30rpx;
}
</style>